<template>
  <div style="margin: 10px;">
    <el-row class="header">
      <h3>全部点评{{ Commentobj.total }}条</h3>
      <p>相关游记34篇</p>
      <div class="space"></div>
      <el-button type="warning" size="small" @click="drawer = true"
        >+ 写评论</el-button
      >
    </el-row>
    <el-row class="content" v-for="(item, index) in CommentData" :key="index">
      <el-col :span="5" class="userinfo">
        <img
          :src="$axios.defaults.baseURL + item.account.defaultAvatar"
          alt=""
          class="userphoto"
        />
        <div class="text">
          <h4>{{ item.account.nickname }}</h4>
          <p>lv.8</p>
        </div>
      </el-col>
      <el-col :span="19">
        <p>{{ item.content }}</p>
        <div class="photoList">
          <img
            :src="$axios.defaults.baseURL + value.url"
            alt=""
            v-for="(value, index1) in item.pics"
            :key="index1"
          />
        </div>
        <el-row class="show">
          <el-col :span="4">
            <el-rate v-model="value" disabled></el-rate>
          </el-col>
          <el-col :span="6">
            {{ dateList[index] }}
          </el-col>
          <el-col :span="14">
            <span class="comm-reply-report">举报</span>
          </el-col>
        </el-row>

        <textarea
          :ref="index"
          placeholder="添加回复..."
          @focus="change(index)"
          @blur="change(index)"
          :class="{
            smallbox: !item.isshow,
            bigbox: item.isshow,
          }"
        ></textarea>

        <!-- <el-input
            type="textarea"
            
            placeholder="请输入内容"
            v-model="textarea"
            @focus="change(index)" 
            @blur="change(index)"
            :class='{
            smallbox:!item.isshow,
            bigbox:item.isshow
            }'
            > -->
        <!-- </el-input> -->

        <div class="huifu" v-if="item.isshow">
          <div class="space"></div>
          <el-button icon="el-icon-edit" type="warning" size="small"
            >回复</el-button
          >
        </div>
      </el-col>
    </el-row>
    <div style="margin: 15px 0; text-align: center;">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handlecurrentChange"
            :current-page="pageIndex"
            :page-size="pageSize"
            :page-sizes="[2,5, 10, 15, 20]"
            :total="Commentobj.total"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
    </div>

    <!-- 弹窗页面 -->
    <el-drawer
      title=""
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      :size="width"
    >
      <div class="hotelWrapper">
        <!-- 标题 -->
        <div class="top">
          <h1>{{commentCityName}}</h1>
          <span>
            <em><em>*</em></em
            >为必填选项</span
          >
        </div>

        <div class="evaluate">
          <el-form class="demo-ruleForm">
            <div class="overallEvaluation" style="margin: 10px 0">
              <label for=""><em>*</em>总体评价</label>
              <el-rate v-model="value1" show-text :texts="texts"> </el-rate
              ><span>点击星星打分</span>
            </div>
            <div class="overallEvaluation">
              <label><em>*</em>位置</label>
              <el-rate v-model="value2" show-text :texts="texts"> </el-rate>
              <span>给位置打分</span>
            </div>
            <div class="overallEvaluation">
              <label><em>*</em>清洁度</label>
              <el-rate v-model="value3" show-text :texts="texts"> </el-rate
              ><span>给清洁度打分</span>
            </div>
            <div class="overallEvaluation">
              <label><em>*</em>设施</label>
              <el-rate v-model="value4" show-text :texts="texts"> </el-rate
              ><span>给设施打分</span>
            </div>
            <div class="overallEvaluation">
              <label><em>*</em>服务</label>
              <el-rate v-model="value5" show-text :texts="texts"> </el-rate
              ><span>给服务打分</span>
            </div>
            <div class="overallEvaluation">
              <label><em>*</em>舒适度</label>
              <el-rate v-model="value6" show-text :texts="texts"> </el-rate
              ><span>给舒适度打分</span>
            </div>
            <div class="overallEvaluation">
              <label><em>*</em>餐饮</label>
              <el-rate v-model="value7" show-text :texts="texts"> </el-rate
              ><span>给餐饮打分</span>
            </div>
            <div class="hotelContent overallEvaluation">
              <label> <em>*</em>内容</label>
              <div>
                <textarea
                  v-model="content"
                  name=""
                  id="textarea"
                  cols="100"
                  rows="5"
                  placeholder="100字以上,有机会评为优质点评哦!"
                ></textarea>
                <div class="otherSize">内容不超过10000字</div>
              </div>
            </div>

            <!-- 提交发布按钮 -->
            <div class="overallEvaluation">
              <label></label>
              <el-form-item class="submit">
                <el-button type="primary" @click="onSubmit">提交</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
        Commentobj:{},
      pageIndex: 1, // 当前页数
      pageSize: 5,  // 显示条数
      commentCityName:'',
      CommentData: [],
      rowsnum: 2,
      value: 5,
      iconClasses: ["icon-rate-face-1", "icon-rate-face-2", "icon-rate-face-3"],
      dateList: [],

      //  弹窗页面
      drawer: false,
      direction: "rtl",
      width: "50%",
      value1: null,
      value2: null,
      value3: null,
      value4: null,
      value5: null,
      value6: null,
      value7: null,
      texts: ["极差", "失望", "一般", "满意", "非常满意"],
      content: "",
    };
  },
  props: ["id" ],
  created() {
    this.loadcommentList()
  },

  methods: {
      loadcommentList(){
          this.$axios({
      url: "/hotels",
      params: {
        id: this.$route.query.id
      },
    }).then(res =>{
        
        console.log(44,res.data.data[0].name);
          this.commentCityName = res.data.data[0].name
    })

    //
    this.loadData()
    for (let i = 0; i < 20; i++) {
      this.dateload();
      console.log(this.dateList);
    }
      },
      // 设置dataList数据
        // setCurrentIndex(index) {
        //         // 判断 如果当前索引已经是激活
        //         // 那么点击就是想将所有都关起来
        //         // 将 当前索引设为 -1
        //         if (index == this.currentIndex) {
        //             this.currentIndex = -1;
        //         } else {
        //             // 否则才将当前点击项为激活
        //             this.currentIndex = index;
        //         }
        //     },
            handlecurrentChange(newPageIndex) {
                this.pageIndex = newPageIndex;
                this.loadData()
            },
            handleSizeChange(newPageSize) {
                this.pageSize = newPageSize;
                this.loadData()
            },
            loadData(){
                this.$axios({
      url: "/hotels/comments",
      params: {
        hotel: this.$route.query.id,
        _limit: this.pageSize, //条数
        _start: this.pageIndex, //开始数据（分页）
      },
    }).then((res) => {
        console.log(33,res);
      this.CommentData = res.data.data;
      this.Commentobj=res.data
      console.log(this.CommentData);
    //    this.setDataList();
    });
            },
        //     setFilteredList(newList) {
        //         this.pageIndex = 1;
        //         this.filteredList = newList;
        //         console.log("父组件收到了子组件的数据传递");
        //         console.log(this.filteredList);
        //     },
    dateload() {
      const moment = require("moment");
      const randomDate = (startDate, endDate) => {
        let date = new Date(+startDate + Math.random() * (endDate - startDate));
        let hour = (0 + Math.random() * (23 - 0)) | 0;
        let minute = (0 + Math.random() * (59 - 0)) | 0;
        let second = (0 + Math.random() * (59 - 0)) | 0;
        date.setHours(hour);
        date.setMinutes(minute);
        date.setSeconds(second);
        return date;
      };

      // 生产当月的开始日期
      const startDate = moment().startOf("month").toDate();
      // 截止日期
      const endDate = new Date();

      const randomTime = moment(randomDate(startDate, endDate)).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.dateList.push(randomTime);
    },
    change(index) {
      this.CommentData[index].isshow = !this.CommentData[index].isshow;
      console.log(this.CommentData[index].isshow);
      this.CommentData = [...this.CommentData];
      if (this.rowsnum == 2) {
        this.rowsnum = 4;
      } else {
        this.rowsnum = 2;
      }
    },

    //弹窗提示
    handleClose(done) {
      
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
        })
        .catch((_) => {});
        console.log(done);
    },
    onSubmit() {
      this.$axios({
        method: "POST",
        url: "/comments",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token,
        },
        data: {
          content: this.content,
          hotel: this.$route.query.id,
        },
      }).then((res) => {
        console.log(res.data);
        if (res.data.message == "提交成功") {
          this.$message.success("评价成功");
          //   this.$router.push("/hotel");
          this.drawer=false
          this.loadcommentList()
        } else {
          this.$message.warning("请先登录");
          this.login = true;
        }
      });
    },
  },
};
</script>
<style lang='less' scoped>
.header {
  display: flex;
  border-bottom: 1px solid #e4e4e4;
  align-items: center;
  height: 36px;
  h3 {
    text-align: center;
    width: 200px;
    padding-bottom: 12px;
    border-bottom: 3px solid #ff8a00;
    font-size: 16px;
  }
  p {
    text-align: center;
    width: 200px;
    padding-bottom: 12px;
  }
  .space {
    flex: 1;
  }
  .el-button {
    margin-bottom: 10px;
  }
}
.content {
  border-bottom: 1px dashed #dfdfdf;
  padding: 15px 0;
  .userinfo {
    display: flex;
    img {
      width: 48px;
      height: 48px;
      border-radius: 24px;
      margin-right: 10px;
    }
    .text {
      flex: 1;
      h4 {
        color: #ffa800;
        font-size: 14px;
      }
      p {
        padding-top: 4px;
        color: #f35035;
        font-weight: bold;
      }
    }
  }
  .photoList {
    padding: 10px 5px;
    display: flex;
    img {
      width: 250px;
      height: 180px;
      padding: 0 5px;
      object-fit: cover;
      border-radius: 10px;
    }
  }
  textarea {
    margin: 0;
    margin-top: 7px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 5px 8px;
    width: 812px;
    height: 40px;
    resize: none;
    line-height: 20px;
    color: #666;
    vertical-align: top;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
  }
  .smallbox {
    width: 98%;
    height: 50px;
  }
  .bigbox {
    width: 98%;
    height: 100px;
    outline: 0;
    border-color: #ffb133;
    box-shadow: 0 0 3px rgba(255, 177, 51, 1);
  }
  .huifu {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    // .el-button {
    // }
    .space {
      flex: 1;
    }
  }
  .comm-reply-report {
    display: none;
    font-size: 14px;
  }
  .comm-reply-report:hover {
    display: inline-block;
    color: #ff8a00;
    font-size: 14px;
  }

  .show:hover .comm-reply-report {
    display: inline-block;
  }
}

// 酒店弹窗

.hotelWrapper {
  padding: 40px;
  width: 950px;
  height: 500px;
  .top {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    h1 {
      padding-right: 10px;
      font-size: 22px;
      font-weight: 400;
      color: #444;
    }
    span {
      font-size: 16px;
      color: #666;
    }
  }
  .evaluate {
    .overallEvaluation {
      display: flex;
      align-items: center;
      span {
        margin-left: 30px;
        color: #999;
        padding-left: 10px;
        font-size: 12px;
      }
    }
    .hotelContent {
      display: flex;
      margin-top: 8px;
      #textarea {
        padding: 10px;
        width: 600px;
        background-color: #efefef;
        border: none;
        outline-color: #ffa800;
        resize: none;
      }
    }
    label {
      width: 90px;
      padding-right: 14px;
      font-size: 14px;
      color: #666666;
      margin: 5px 10px;
      text-align: right;
    }
    .uplpadImg {
      display: flex;
    }
  }
  .otherSize {
    font-size: 12px;
    padding: 5px 0;
    color: #999;
  }
  /deep/.el-button {
    margin-right: 20px;
    width: 130px;
    height: 36px;
    border: none;
    border-radius: 2px;
    background-color: #ffa800;
  }
}
em {
  font-style: normal;
  color: #ea3c1a;
}
.el-rate {
  width: 200px;
}
/deep/ .el-drawer {
  width: 50%;
}
</style>